<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虎牙直播</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./swiper-4.5.0/dist/css/swiper.min.css">
    <style>
        .swiper-button-next{
            width: 70px;
            height: 70px;
            background: rgba(0,0,0,.7);
            right: -30px;
            top:45%;
            border-radius: 60px 0px 0px 60px ;
            display: none;
        }
        .swiper-button-prev{
            width: 70px;
            height: 70px;
            background: rgba(0,0,0,.7);
            left: -30px;
            top:45%;
            border-radius:0px 60px 60px 0px;
            display: none;
        }
        .swiper-container:hover .swiper-button-next,
        .swiper-container:hover .swiper-button-prev
            {
            display: block;
        }
        .swiper-pagination-bullet{
            background: #ffffff;
            opacity: 0.9;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: #ff9c00;
            width: 35px;
            border-radius: 10px;
        }
        .swiper-button-next:hover{
            background:#ff9c00 ;
            opacity: .8;
        }
        .swiper-button-prev:hover{
            background:#ff9c00 ;
            opacity: .8;
        }
        .bianh{
            border: 2px solid #ff9c00;
        }
    </style>
</head>
<body>
<div class="container">
    <nav>
       <div class="nav ov">
           <div class="fl">
               <img src="./img/logo.png" alt="" class="fl">
               <a href="" class="huang">首页</a>
               <a href="">直播</a>
               <div class="fl">
                   <div class="duo duo1 ov">
                       <a href="" class="jc">
                           分类
                           <span></span>
                       </a>
                   </div>
                   <div class="n3-y">
                       <div>
                           <i></i>
                       </div>
                       <div class="di1 ov">
                           <h5>热门分类</h5>
                           <li><a href="">英雄联盟</a></li>
                           <li><a href="">王者荣耀</a></li>
                           <li><a href="">和平精英</a></li>
                           <li><a href="">一起看</a></li>
                           <li><a href="">星秀</a></li>
                           <li><a href="">户外</a></li>
                           <li><a href="">绝地求生</a></li>
                           <li><a href="">主机游戏</a></li>
                           <li><a href="">穿越火线</a></li>
                           <li><a href="">二次元</a></li>
                           <li><a href="">交友</a></li>
                           <li><a href="">颜值</a></li>
                       </div>
                       <div class="di1">
                           <h5>玩家推荐</h5>
                           <li><a href="">英雄联盟</a></li>
                           <li><a href="">王者荣耀</a></li>
                           <li><a href="">和平精英</a></li>
                           <li><a href="">一起看</a></li>
                           <li><a href="">星秀</a></li>
                           <li><a href="">户外</a></li>
                           <li><a href="">绝地求生</a></li>
                           <li><a href="">主机游戏</a></li>
                           <li><a href="">穿越火线</a></li>
                           <li><a href="">二次元</a></li>
                           <li><a href="">交友</a></li>
                           <li><a href="">颜值</a></li>
                       </div>
                       <a href="" class="gd">更多 > </a>
                   </div>
               </div>

               <div class="fl ov">
                  <div class="duo duo2 ov">
                      <a href="" class="jc">
                          赛事
                          <span></span>
                      </a>
                  </div>
                  <div class="n4-y jia">
                      <div>
                          <i></i>
                      </div>
                      <div class="di2">
                          <h5>赛事直播</h5>
                          <li><a href=""><span></span>LPL职业联赛-英雄联盟</a></li>
                          <li><a href=""><span></span>小虎青训营总决赛</a></li>
                          <li><a href=""><span></span>暴雪游戏频道</a></li>
                          <li><a href=""><span></span>堡垒职业世界杯</a></li>
                          <li><a href=""><span class="hui"></span>LCK冠军联赛-英雄联盟</a></li>
                      </div>
                      <div class="di3">
                            <h5>赛事预告</h5>
                            <li><span>明天&nbsp;&nbsp;&nbsp;15:00&nbsp;</span>绝对求生：PKL职…<a href="">预订</a></li>
                            <li><span>明天&nbsp;&nbsp;&nbsp;13:00&nbsp;</span>英雄联盟：LPL夏季…<a href="">预订</a></li>
                            <li><span>明天&nbsp;&nbsp;&nbsp;14:00&nbsp;</span>虎牙飞车超级个人…<a href="">预订</a></li>
                            <li><span>06.12&nbsp;&nbsp;&nbsp;16:00&nbsp;</span>英雄联盟：LCK夏…<a href="">预订</a></li>
                      </div>
                  </div>
              </div>
               <div class="fl">
                   <div class="duo duo3">
                       <a href="" class="jc">
                           视频
                           <span></span>
                       </a>
                   </div>
                   <div class="n5-y jia jiaa">
                       <div>
                           <i></i>
                       </div>
                       <div class="di4">
                           <h5>精选专题</h5>
                           <li><a href=""><span>1</span>【X战警】虎牙一起看全面观影前瞻！</a></li>
                           <li><a href=""><span>2</span>【药水哥】兄弟萌，带给大家的舞蹈串烧！</a></li>
                           <li><a href=""><span>3</span>【星魂】绝地求生集锦血拼24杀吃鸡！</a></li>
                           <li><a href=""><span class="qianl">4</span>【虎神】团灭对手贾克斯极限团战1V5!</a></li>
                           <li><a href=""><span class="qianl">5</span>【和平精英】虎牙大神精彩TOP10集锦！</a></li>
                       </div>

                   </div>
               </div>
               <div class="inp fl">
                   <input type="text" value="搜索名称或房间号">
                   <button ></button>
               </div>
           </div>

        <div class="fr ov you">
            <div class="li fl">
                <i></i>
                <span class="fl">历史</span>
            </div>
            <div class="deng fl">
                <i></i>
                <span class="fl">登录</span>
            </div>
            <span class="fl sp">|</span>
            <div class="zhu fl">
                <span>注册</span>
            </div>
        </div>
           <div class="dayin fr ov">
               <a href="" class="fr">打开APP</a>
               <span class="fr"></span>
           </div>
       </div>
    </nav>
    <header>
        <div class="head-le fl ov">
            <img src="./img/lol.png" alt="" class="huan block">
            <img src="./img/APK.png" alt="" class="huan">
            <div class="zai ov huan">
                <img src="./img/logo2.png" alt="">
                <p>正在加载…</p>
            </div>
            <img src="./img/nannan.png" alt="" class="huan">
            <img src="./img/hma.png" alt="" class="huan">
            <img src="./img/qqfeiche.png" alt="" class="huan">
        </div>
        <div class="head-ri fl">
            <ul class="ul1">
                <li class="o ji1 huang">
                    <div class="ov i">
                        <img src="./img/up_15592648038501_pic.jpg" alt="">
                    </div>
                </li>
                <li class="o ji2">
                    <div class="i ov">
                        <img src="./img/up_15583344281149_pic.jpg" alt="">
                    </div>
                </li>
                <li class="o ji3">
                    <div class="i ov">
                        <img src="./img/up_15595452623688_pic.jpg" alt="">
                    </div>
                </li>
                <li class="o ji4">
                    <div class="i ov">
                        <img src="./img/up_15599834006857_pic.jpg" alt="">
                    </div>
                </li>
                <li class="ji5 o">
                    <div class="i ov">
                        <img src="./img/up_15599006452812_pic.jpg" alt="">
                    </div>
                </li>
                <li class="o ji6">
                    <div class="i ov">
                        <img src="./img/up_15554118194021_pic.jpg" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <main>
        <div class="souyin">
            <input type="text" placeholder="输入名称或房间号">
        </div>
        <div class="main-h ov" id="min">
            <div class="main-h-g fl">
                <div class="ma-h-l-t ov">
                    <img src="./img/wangyou.png" alt="" class="fl">
                    <h3 class="fl"><a href="">网游竞技</a></h3>
                    <li v-for="m in ming"><a href=""> {{m}} </a>&nbsp; · &nbsp;</li>
                    <li><a href="">刀塔自走棋</a></li>
                </div>
                <div class="ma-h-l-k ov">
                    <div class="col col1 fl">
                        <a href="">
                            <span>保持善良，坚强向上~</span>
                            <img src="./img/bo.png" alt="">
                            <p>穿越火线</p>
                        </a>
                    </div>
                    <div class="col col2 fl">
                        <a href="">
                            <span>开搞！！开搞！！</span>
                            <img src="./img/bo.png" alt="">
                            <p>梦三国</p>
                        </a>
                    </div>
                    <div class="col col3 fl">
                        <a href="">
                            <span>感谢各位大哥的支持</span>
                            <img src="./img/bo.png" alt="">
                            <p>魔兽争霸</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="main-h-g fl">
                <div class="ma-h-l-t ov">
                    <img src="./img/danji.png" alt="" class="fl">
                    <h3 class="fl"><a href="">单机热游</a></h3>
                    <li v-for="mq in mingl"><a href=""> {{ mq }} </a>&nbsp; · &nbsp;</li>
                    <li><a href="">Apex英雄</a></li>
                </div>
                <div class="ma-h-l-k ov">
                    <div class="col col4 fl">
                        <a href="">
                            <span>【俊逸】宇宙第一</span>
                            <img src="./img/bo.png" alt="">
                            <p>Apex英雄</p>
                        </a>
                    </div>
                    <div class="col col5 fl">
                        <a href="">
                            <span>【蓝光15】杀手2</span>
                            <img src="./img/bo.png" alt="">
                            <p>主机游戏</p>
                        </a>
                    </div>
                    <div class="col col6 fl">
                        <a href="">
                            <span>【雨家军】封神大陆</span>
                            <img src="./img/bo.png" alt="">
                            <p>方舟</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="main-h-g fl">
                <div class="ma-h-l-t ov">
                    <img src="./img/yule.png" alt="" class="fl">
                    <h3 class="fl"><a href="">娱乐天地</a></h3>
                    <li v-for="mi in mingll"><a href=""> {{ mi }} </a>&nbsp; · &nbsp;</li>
                    <li><a href="">交友</a></li>
                </div>
                <div class="ma-h-l-k ov">
                    <div class="col col7 fl">
                        <a href="">
                            <span>惹火大宝贝回来了</span>
                            <img src="./img/bo.png" alt="">
                            <p>星秀</p>
                        </a>
                    </div>
                    <div class="col col8 fl">
                        <a href="">
                            <span>首尔 玛莎 约韩国美女~</span>
                            <img src="./img/bo.png" alt="">
                            <p>户外</p>
                        </a>
                    </div>
                    <div class="col col9 fl">
                        <a href="">
                            <span>黑心老板在线陪玩吃鸡！</span>
                            <img src="./img/bo.png" alt="">
                            <p>交友</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="main-h-g fl">
                <div class="ma-h-l-t ov">
                    <img src="./img/shouyou.png" alt="" class="fl">
                    <h3 class="fl"><a href="">手游休闲</a></h3>
                    <li v-for="mii in minglll"><a href=""> {{ mii }} </a>&nbsp; · &nbsp;</li>
                    <li><a href="">跑跑卡丁车</a></li>
                </div>
                <div class="ma-h-l-k ov">
                    <div class="col col10 fl">
                        <a href="">
                            <span>游戏自闭·找个姐姐开导我</span>
                            <img src="./img/bo.png" alt="">
                            <p>王者荣耀</p>
                        </a>
                    </div>
                    <div class="col col11 fl">
                        <a href="">
                            <span>纯人评测上9-1，省级名次</span>
                            <img src="./img/bo.png" alt="">
                            <p>中国象棋</p>
                        </a>
                    </div>
                    <div class="col col12 fl">
                        <a href="">
                            <span>#治愈系主播团#带你飞</span>
                            <img src="./img/bo.png" alt="">
                            <p>镇魔曲</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-m ov">
            <div class="main-m-l fl">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./img/lun1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/lun2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/lun3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/lun4.jpg" alt=""></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next">
                        <i></i>
                    </div>
                    <div class="swiper-button-prev">
                        <i></i>
                    </div>
                </div>
            </div>
            <div class="main-m-z fl">
                <div class="tujia">
                    <img src="./img/tujia.png" alt="">
                </div>
                <h3><a href="#">06.10-06.16一周赛事精彩推荐</a></h3>
                <div class="saishi">
                    <ul>
                        <li class="ov"><a href="" class="fl">《完美世界》手游舞林大会赢万元Q币</a> <span class="fr">06/11</span></li>
                        <li class="ov"><a href="" class="fl">【虎牙体育】体育大神主播招募开启啦</a> <span class="fr">06/11</span></li>
                        <li class="ov aaa1"><a href="" class="fl">卡牌策略手游《战区英雄》主播召集令</a> <span class="fr">06/11</span></li>
                    </ul>
                </div>
                <div class="gui">
                    <a href="#" class="fl">政策FAQ</a>
                    <a href="#" class="fl">
                        直播间广告规范
                    </a>
                    <a href="#" class="fl">
                        加强主播自律
                    </a>
                    <a href="#" class="fl">
                        录像剪辑
                    </a>
                    <a href="#" class="fl">            虎牙志愿者招募令
                    </a>
                    <a href="#" class="fl">
                        粉丝后援会
                    </a>
                </div>
            </div>
            <div class="main-m-r fr">
                <h3>节目预告</h3>
                <div class="jmd">
                    <div class="jm1">
                        <a href=""><span>12日00:00</span> 2019 E3游戏展</a>
                        <div class="jmy">
                            <img src="./img/up_15599834006857_pic.jpg" class="fl" alt="" width="182px" height="65px">
                            <div class="jmy-d fl">
                                <img src="./img/shi.png" alt="">
                                <p>预订</p>
                            </div>
                        </div>
                    </div>
                    <div class="jm1 jm2">
                        <a href=""><span>12日15:00</span>绝地求生：小虎青训决赛</a>
                    </div>
                    <div class="jm1">
                        <a href=""><span>12日16:00</span>英雄联盟：LCK夏季赛</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="main-re ov">
            <div class="re-le fl">
                    <div class="rl-t ov">
                        <img src="./img/huo.png" alt="" class="fl">
                        <h2 class="fl">热门分类</h2>
                        <div class="rl-ta ov fl">
                            <a href="#">网游电竞</a>
                            <a href="#">单机热游</a>
                            <a href="#">娱乐天地</a>
                            <a href="#">手游休闲</a>
                        </div>
                        <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                    </div>
                    <div class="rl-k">
                        <ul class="ov">
                            <li>
                                <div>
                                    <img src="./img/1-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>英雄联盟</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/2336-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>王者荣耀</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/2135-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>一起看</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/1663-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>星秀</p>
                            </li>
                            <li class="m0">
                                <div>
                                    <img src="./img/3203-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>和平精英</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/2793-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>绝地求生</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/hu.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>户外</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/100032-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>主机游戏</p>
                            </li>
                            <li>
                                <div>
                                    <img src="./img/4-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>穿越火线</p>
                            </li>
                            <li class="m0">
                                <div>
                                    <img src="./img/2633-S.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <p>二次元</p>
                            </li>
                        </ul>
                    </div>
            </div>
            <div class="re-ri fl">
                <div class="rr-t ov">
                    <img src="./img/zixing.png" alt="" class="fl">
                    <h2 class="fl">明星大神</h2>
                    <a href="" class="fr you-a">成为主播<img src="./img/you-a.png" alt="" class="fr"></a>
                </div>
                <div class="rr-k ov" id="app">
                    <li class="rr-k1 ov" v-for="url in message">
                        <div class="rrtou fl">
                            <img :src="url.img" alt="">
                            <span></span>
                        </div>
                        <div class="rr-z fl">
                            <h5>{{url.ming}}</h5>
                            <p>{{url.title}}</p>
                        </div>
                    </li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/game_15362272423985_logo.png" alt="" class="fl">
                <h2 class="fl">英雄联盟</h2>
                <div class="rl-ta ov fl">
                    <a href="#">Uzi</a>
                    <a href="#">卡尔</a>
                    <a href="#">骚男</a>
                    <a href="#">胖炸</a>
                    <a href="#">神超</a>
                    <a href="#">姿态</a>
                    <a href="#">青蛙</a>
                    <a href="#">星痕</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">3776 <span>个主播正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/l1.webp" alt="">
                    <div class="lol-p">
                        <h4>KZ 1:0 SKT LCK夏季赛</h4>
                        <a href="" class="fl"><img src="./img/lt1.jpg" alt="">LCK冠军联赛</a>
                        <span class="fr"><i></i> 444.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/l2.webp" alt="">
                    <div class="lol-p">
                        <h4>搞个比心小姐姐玩玩</h4>
                        <a href="" class="fl"><img src="./img/lt2.jpg" alt="">Zz1tai姿态</a>
                        <span class="fr"><i></i> 444.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光8M</li>
                    <li class="qian">魅力新星</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/l3.webp" alt="">
                    <div class="lol-p">
                        <h4>小绿巨人：有请4位幸运儿</h4>
                        <a href="" class="fl"><img src="./img/lt3.jpg" alt="">董月月</a>
                        <span class="fr"><i></i> 444.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光4M</li>
                    <li class="qian">视频美女</li>
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/l4.webp" alt="">
                    <div class="lol-p">
                        <h4>巴中张学友 耍猴小能手</h4>
                        <a href="" class="fl"><img src="./img/lt4.jpg" alt="">大圣归来</a>
                        <span class="fr"><i></i> 444.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光8M</li>
                    <li class="qian">魅力新星</li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/xou.png" alt="" class="fl">
                <h2 class="fl">星秀</h2>
                <div class="rl-ta ov fl">
                    <a href="#">小熊</a>
                    <a href="#">幼熙</a>
                    <a href="#">林阿兔</a>
                    <a href="#">艾小米</a>
                    <a href="#">宇文泡</a>
                    <a href="#">郑佳琦</a>
                    <a href="#">车老板</a>
                    <a href="#">混世</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">582 <span>个主播正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/l5.jpg" alt="" id="tu">
                    <div class="lol-p">
                        <h4>星秀这么乱，嘎子陪你看</h4>
                        <a href="" class="fl"><img src="./img/lt5.jpg" alt="">258-二嘎子</a>
                        <span class="fr"><i></i> 98.7万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">魅力新星</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/l6.jpg" alt="">
                    <div class="lol-p ov">
                        <h4>关注杨小楠616生日</h4>
                        <a href="" class="fl"><img src="./img/lt6.jpg" alt="">集梦杨小楠【712】</a>
                        <span class="fr"><i></i> 74.5万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">视频美女</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/sb.jpg" alt="">
                    <div class="lol-p">
                        <h4>姑姑你在哪，等我来认</h4>
                        <a href="" class="fl"><img src="./img/sb2.jpg" alt="">血色-迷醉【晶徒】</a>
                        <span class="fr"><i></i> 7.4万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">白金推荐</li>
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/l7.jpg" alt="">
                    <div class="lol-p">
                        <h4>古风小姐姐</h4>
                        <a href="" class="fl"><img src="./img/lt4.jpg" alt="">HYZ-江澜</a>
                        <span class="fr"><i></i> 40.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光4M</li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/kong.png" alt="" class="fl">
                <h2 class="fl">绝地求生</h2>
                <div class="rl-ta ov fl">
                    <a href="#">托马斯</a>
                    <a href="#">韦神</a>
                    <a href="#">拉风龙</a>
                    <a href="#">bb文</a>
                    <a href="#">陈子豪</a>
                    <a href="#">孤存</a>
                    <a href="#">SY</a>
                    <a href="#">小海</a>
                    <a href="#">肥龙</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">1461 <span>个主播正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/j1.webp" alt="">
                    <div class="lol-p">
                        <h4>训练赛嘻嘻</h4>
                        <a href="" class="fl"><img src="./img/jt1.jpg" alt="">4AM永远</a>
                        <span class="fr"><i></i>181.7万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">职业选手</li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/j2.webp" alt="">
                    <div class="lol-p ov">
                        <h4>跳伞神童，欢乐匹配路人</h4>
                        <a href="" class="fl"><img src="./img/jt2.jpg" alt="">拉风龙</a>
                        <span class="fr"><i></i> 178.5万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">超级明星</li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/j3.webp" alt="">
                    <div class="lol-p">
                        <h4>绝地路人最靓的仔！开战舰啦！</h4>
                        <a href="" class="fl"><img src="./img/jt3.jpg" alt="">乐神</a>
                        <span class="fr"><i></i> 91.4万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">大神推荐</li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/j4.webp" alt="">
                    <div class="lol-p">
                        <h4>刚拔完牙，见谅</h4>
                        <a href="" class="fl"><img src="./img/jt4.jpg" alt="">4AMCat</a>
                        <span class="fr"><i></i> 65.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光8M</li>
                    <li class="qian">职业选手</li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/zhuj.png" alt="" class="fl">
                <h2 class="fl">主机游戏</h2>
                <div class="rl-ta ov fl">
                    <a href="#">楚河</a>
                    <a href="#">小宇</a>
                    <a href="#">贱圣</a>
                    <a href="#">导演</a>
                    <a href="#">星辉</a>
                    <a href="#">花教授</a>
                    <a href="#">马桶</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">995 <span>个主播正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/hui.jpg" alt="">
                    <div class="lol-p">
                        <h4>哎？这里哪里可以直播吗</h4>
                        <a href="" class="fl"><img src="./img/goutou.jpg" alt="">爱拍、星辉-90938</a>
                        <span class="fr"><i></i> 195.0万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">超级明星</li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/l5.webp" alt="">
                    <div class="lol-p ov">
                        <h4>懵逼·D·js海贼团第五番队~~</h4>
                        <a href="" class="fl"><img src="./img/lt13.jpg" alt="">狂鸟、阿坤-90327</a>
                        <span class="fr"><i></i> 74.5万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/l6.webp" alt="">
                    <div class="lol-p">
                        <h4>（老奇）江湖模式 长老服</h4>
                        <a href="" class="fl"><img src="./img/lt12.jpg" alt="">娱加-奇老师</a>
                        <span class="fr"><i></i> 58.4万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian">超能王者</li>
                    <li class="lan">蓝光6M</li>
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/l7.webp" alt="">
                    <div class="lol-p">
                        <h4>人类一败涂地独家MOD直播</h4>
                        <a href="" class="fl"><img src="./img/lt11.jpg" alt="">小宇热游直播</a>
                        <span class="fr"><i></i> 48.8万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="lan">蓝光5M</li>
                    <li class="qian">魅力新星</li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/er.png" alt="" class="fl">
                <h2 class="fl">二次元</h2>
                <div class="rl-ta ov fl">
                    <a href="#">JV-轩墨宝宝</a>
                    <a href="#">轩子巨2兔</a>
                    <a href="#">伦桑</a>
                    <a href="#">小曲儿</a>
                    <a href="#">卡修Rui</a>
                    <a href="#">海疼er</a>
                    <a href="#">少恭</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">124 <span>个主播正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/e1.webp" alt="">
                    <div class="lol-p">
                        <h4>【猫和老鼠】汤姆和杰瑞的故事</h4>
                        <a href="" class="fl"><img src="./img/et1.jpg" alt="">HelloKitty</a>
                        <span class="fr"><i></i> 58.7万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov">
                    <img src="./img/e2.webp" alt="">
                    <div class="lol-p ov">
                        <h4>【蜡笔小新】智障儿童欢乐多</h4>
                        <a href="" class="fl"><img src="./img/et2.jpg" alt="">野原新之助-</a>
                        <span class="fr"><i></i> 57.5万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov">
                    <img src="./img/e3.webp" alt="">
                    <div class="lol-p">
                        <h4>【天才学生】有生之年能看…</h4>
                        <a href="" class="fl"><img src="./img/et3.jpg" alt="">黑影君</a>
                        <span class="fr"><i></i> 57.0万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/e4.webp" alt="">
                    <div class="lol-p">
                        <h4>【幽冥诡匠】小阔耐来勒~</h4>
                        <a href="" class="fl"><img src="./img/et4.jpg" alt="">鸿音丶花叔</a>
                        <span class="fr"><i></i> 25万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/dianjin.png" alt="" class="fl">
                <h2 class="fl">电竞赛事</h2>
                <div class="rl-ta ov fl">
                    <a href="#">LPL</a>
                    <a href="#">PCL</a>
                    <a href="#">LCK</a>
                    <a href="#">OWL</a>
                    <a href="#">HML</a>
                    <a href="#">TGA</a>
                    <a href="#">NEST</a>
                </div>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
                <p class="fr">65 <span>个赛事正在直播</span></p>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/d1.jpg" alt="">
                    <div class="lol-p">
                        <h4>KT 1:0 DWG LCK夏季赛</h4>
                        <a href="" class="fl"><img src="./img/dt1.jpg" alt="">LCK冠军</a>
                        <span class="fr"><i></i> 195.0万  <a href="">英雄联盟</a></span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian pa0"><img src="./img/bszh.png" alt=""></li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/d2.jpg" alt="">
                    <div class="lol-p">
                        <h4>DMO vs TES LPL夏季赛</h4>
                        <a href="" class="fl"><img src="./img/dt2.jpg" alt="">LPL职业赛</a>
                        <span class="fr"><i></i>95.0万  <a href="">英雄联盟</a></span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian pa0"><img src="./img/bszh.png" alt=""></li>
                    <li class="lan">蓝光8M</li>
                </div>
                <div class="l1-k ov">
                    <img src="./img/d3.jpg" alt="">
                    <div class="lol-p">
                        <h4>第四届虎牙HMA总决赛 CFM…</h4>
                        <a href="" class="fl"><img src="./img/dt3.jpg" alt="">HMA官方直播</a>
                        <span class="fr"><i></i>95.0万  <a href="">英雄联盟</a></span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian pa0"><img src="./img/bszh.png" alt=""></li>
                    <li class="lan">蓝光10M</li>
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/d4.jpg" alt="">
                    <div class="lol-p">
                        <h4>GKS vs AG S联赛附加赛</h4>
                        <a href="" class="fl"><img src="./img/dt4.jpg" alt="">QQ飞</a>
                        <span class="fr"><i></i>95.0万  <a href="">QQ飞车手游</a></span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                    <li class="qian pa0"><img src="./img/bszh.png" alt=""></li>
                    <li class="lan">蓝光10M</li>
                </div>
            </div>
        </div>
        <div class="lian">
            <div class="rl-t ov">
                <img src="./img/gangneng.png" alt="" class="fl">
                <h2 class="fl">主播高能时刻</h2>
            </div>
            <div class="lol-k ov">
                <div class="l1-k ov">
                    <img src="./img/gq.jpg" alt="">
                    <div class="lol-p">
                        <h4>【青蛙】王者局遇到疑似演员?</h4>
                        <a href="" class="fl"><img src="./img/g1.jpg" alt="">青蛙</a>
                        <span class="fr"><i class="quan"></i>4.9万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov">
                    <img src="./img/gw.jpg" alt="">
                    <div class="lol-p">
                        <h4>哈皮时刻：那天，我被同一个…</h4>
                        <a href="" class="fl"><img src="./img/g2.jpg" alt="">哈迪斯</a>
                        <span class="fr"><i class="quan"></i>3.0万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov">
                    <img src="./img/ge.jpg" alt="">
                    <div class="lol-p">
                        <h4>孤影近期的极限操作，血越少…</h4>
                        <a href="" class="fl"><img src="./img/g3.jpg" alt="">厌世小孤影</a>
                        <span class="fr"><i class="quan"></i>11.9万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
                <div class="l1-k ov li-k">
                    <img src="./img/gr.jpg" alt="">
                    <div class="lol-p">
                        <h4>黄三儿的越南逛吃VLOG，越…</h4>
                        <a href="" class="fl"><img src="./img/g4.jpg" alt="">虎牙-京城黄三儿</a>
                        <span class="fr"><i class="quan"></i>4.0万</span>
                    </div>
                    <img src="./img/bo.png" alt="" class="zhan">
                </div>
            </div>
        </div>
        <div class="huod">
            <div class="rl-t ov">
                <img src="./img/guanfang.png" alt="" class="fl">
                <h2 class="fl">官方活动</h2>
                <a href="#" class="fr you-a">更多 <img src="./img/you-a.png" alt="" class="fr"></a>
            </div>
            <div class="gf-t ov">
                <li><img src="./img/h1.jpg" alt=""></li>
                <li><img src="./img/h2.jpg" alt=""></li>
                <li><img src="./img/h3.jpg" alt=""></li>
                <li class="gf-l"><img src="./img/h4.jpg" alt=""></li>
            </div>
        </div>
    </main>
</div>
<footer>
        <div class="foot-top ov">
            <div class="container ov">
            <div class="col-4 fl ov">
                <ul class="fl" style="width:140px">
                    <h6>友情链接</h6>
                    <li>多玩游戏</li>
                    <li>YY游戏</li>
                    <li>腾讯游戏频道</li>
                    <li>快看漫画</li>
                    <li>全球电竞网</li>
                    <li>凤凰游戏电竞</li>
                    <li>爱拍</li>
                    <li>搜狐56视频</li>
                    <li>爱奇艺游戏</li>
                    <li>多玩视频</li>
                    <li>网站联运合作</li>
                    <li>视频直播</li>
                    <li>热门英雄直播</li>
                    <li>开放平台</li>
                    <li>视频专题列表</li>
                </ul>
                <ul class="fl" style="width: 170px">
                    <h6>主播帮助</h6>
                    <li>新人主播指引</li>
                    <li>开播工具下载</li>
                    <li>开播教程引导</li>
                </ul>
            </div>
            <div class="col-4 fl ov" style="width: 400px">
                <h6>虎牙产品下载</h6>
                <div class="fo-zai fl">
                    <img src="./img/huyawxgzh.jpg" alt="">
                    <p>扫描下载虎牙APP</p>
                </div>
                <div class="fo-jie fl">
                    <li><i class="fi1"></i>iPhone版</li>
                    <li><i class="fi4"></i>iPad 版</li>
                    <li><i class="fi2"></i>Android 版</li>
                    <li><i class="fi5"></i>Android Pad</li>
                    <li><i class="fi3"></i>TV 版</li>
                    <li><i class="fi6"></i>PC 版</li>
                    <li><i class="fi7"></i>Win版/WP版</li>
                </div>
            </div>
            <div class="col-4 ov" style="width: 238px">
                <h6>关注我们</h6>
                <div class="f-r-tu fl">
                    <img src="./img/huyawxgzh.jpg" alt="">
                    <p>扫描关注微信公众号</p>
                </div>
                <div class="f-r-ri fl">
                    <li><i class="im1 fl"></i>虎牙官方微博</li>
                    <li><i class="im2 fl"></i>贴吧交流</li>
                    <li>不良信息投诉与举报</li>
                </div>
            </div>
        </div>
    </div>
    <div class="foot-bo">
        <div class="container ov">
            <div class="hang1">
                <div class="ov">
                    <li>关于虎牙</li><span>|</span>
                    <li>Investor Relations</li><span>|</span>
                    <li><a href="./index2.html">加入我们</a></li><span>|</span>
                    <li>合作联系</li><span>|</span>
                    <li>友情链接</li><span>|</span>
                    <li>广告投放</li><span>|</span>
                    <li>在线客服</li><span>|</span>
                    <li>平台规则</li><span>|</span>
                    <li>隐私权保护政策</li><span>|</span>
                    <li>版权保护投诉指引</li>
                </div>
            </div>
            <div class="hang2 ov">
                <li>增值电信业务经营许可证 粤B2-20170312</li>
                <li>B1-20181380</li>
                <li>粤网文[2016]7030-1681号</li>
                <li><i></i>粤公网案备44011302000433</li>
            </div>
            <div class="hang3 ov">
                <li>粤ICP备16120983号-1</li> <span>|</span>
                <li>网络出版服务许可证</li> <span>|</span>
                <li>广播电视节目制作经营许可证</li>
            </div>
            <div class="hang4 ov">
                <p class="fl">广州虎牙信息科技有限公司  版权所有 © 2012-2019 </p>
                <li>HUYA</li>
                <li>12318全国文化市场举报网站</li>
                <li>中国互联网不良信息举报中心</li>
                <p>客服举报电话：0756-2211951</p>
            </div>
            <div class="hang5">
                <img src="./img/yyinc.png" alt="">
                <a href=""><img src="./img/sf.png" alt=""></a>
            </div>
        </div>
    </div>
</footer>

<div class="footer-ji">
    <p>版权所有 © 2016-2019 huya.com</p>
    <div>
        <a href="">APP下载</a> <span>|</span>
        <a href="">意见反馈</a> <span>|</span>
        <a href="./index2.html">加入我们</a>
    </div>
</div>

<div class="ding-ce">
    <div class="ce-top"><img src="./img/mm_de16b.png" alt=""></div>
    <div class="ce-nei" style="z-index:5555555;">
        <li class="liii">
            <div>
                <span class="ce-i1"></span>
                <a href="">下载</a>
            </div>
            <img src="./img/app_download_b001f.png" alt="" >
        </li>
        <li>
            <span class="ce-i2"></span>
            <a href="">开播</a>
        </li>
        <li>
            <span class="ce-i3"></span>
            <a href="">合作</a>
        </li>
        <li>
            <span class="ce-i4"></span>
            <a href="">反馈</a>
        </li>
        <li>
            <span class="ce-i5"></span>
            <a href="">帮助</a>
        </li>
        <li>
            <span class="ce-i6"></span>
            <a href="./index3.html">举报</a>
        </li>
        <li class="totop" id="toTop">
            <span class="ce-i7"></span>
            <a href="">顶部</a>
        </li>
    </div>
</div>

<div class="ji-ce">
   <div>
       <li>
           <span class="ig1" id="toSh"></span>
           <p>顶部</p>
       </li>
       <li>
           <span class="ig2"></span>
           <p>反馈</p>
       </li>
       <li>
           <span class="ig3"></span>
           <p>开播</p>
       </li>
   </div>
</div>


<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/script.js"></script>







<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        loop:1,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
          return '<span class="' + className + '">'+ '</span>';
        },
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

</body>
</html>